<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>移动端事件</title>
		<!--快捷方式m7-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<!--
			PC端跟鼠标相关事件
				click
				mousedown
				mousemove
				mouseup
			移动端事件关键词
				touchstart
				touchmove
				touchend
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.click_box{
				width: 250px;
				height: 250px;
				background-color: greenyellow;
				font-size: 40px;
			}
			.touch_box{
				width: 250px;
				height: 250px;
				font-size: 40px;
				background-color: cyan;
			}
				.baba{
				width: 400px;
				height: 50px;
				background-color: chartreuse;
				position: relative;
			}
			.son{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: lightblue;
				cursor: pointer;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		<div class="click_box">我是PC端</div>
		<div class="touch_box">我是移动端</div>
		<div class="baba">
			<div class="son"></div>
		</div>
		
		
		<!--
			在移动端上看打印台信息，使用Vconsole
		-->
		<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vc = new VConsole();
			var clickBox = document.querySelector(".click_box");
			var touchBox = document.querySelector(".touch_box");
			
			clickBox.onclick = function(){
				console.log("click");
			};
			touchBox.ontouchend = function(){
				console.log("touchend");
			}
			touchBox.ontouchstart = function(){
				console.log("touchstart");
			}
			touchBox.ontouchmove = function(){
				console.log("ontouchmove");
			}
		</script>
		
		<script type="text/javascript">
			var baba = document.querySelector(".baba");
			var son = document.querySelector(".son");
			var startX = 0;
			var nowX = 0;
			
			son.addEventListener("touchstart",function(e){
				console.log(e.pageX);
				startX = e.pageX;
				baba.addEventListener("touchmove",function(e){
				console.log(e.pageX);
					nowX = e.pageX;
					d = nowX - startX;
					son.style.left = d+"px";
				})
			})
			
			
		</script>
	</body>
</html>
